{extend name="index/base" /}
{block name="main"}
<form class="layui-form" action="?s=4">
    <div class="main">
        {include file="index/header" /}
        <div class="progress">
            <ul class="p-3">
                <li><span>许可协议</span></li>
                <li><span>环境检测</span></li>
                <li><span>设定配置</span></li>
                <li><span>安装完成</span></li>
            </ul>
        </div>
        <div class="upform">
            <h2>数据库信息</h2>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 数据库地址</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="dbhost" id="dbhost" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库地址" value="127.0.0.1"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入数据库服务器地址，一般为：localhost</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 数据库端口</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="dbport" id="dbport" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库端口" value="3306"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入数据库端口号，一般为：3306</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 数据库名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="dbname" id="dbname" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库名称" value="madong_admin_saas"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入数据库的名称，如果没有请先新增</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 数据库账号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="dbuser" id="dbuser" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库账号" value="root"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入数据库账号，默认为：root</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"> 数据表前缀</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="dbpre" id="dbpre" autocomplete="off" value="ma_" readonly/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入数据表前缀，默认为：ma_</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 数据库密码</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" name="dbpwd" id="dbpwd" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库密码" lay-affix="eye" value=""/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入连接数据库账号的密码</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">覆盖数据库</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="overwrite" lay-skin="primary">
                </div>
                <div class="layui-form-mid layui-word-aux">请选择是否强制覆盖数据库</div>
            </div>

            <h2>Redis 信息</h2>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> Redis 地址</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="redis_host" id="redis_host" autocomplete="off" lay-verify="required" lay-reqtext="请输入redis地址" value="127.0.0.1"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入redis服务器地址，一般为：localhost</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> Redis 端口</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="redis_port" id="redis_port" autocomplete="off" lay-verify="required" lay-reqtext="请输入redis端口" value="6379"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入redis端口号，一般为：6379</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> Redis 密码</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="redis_pwd" id="redis_pwd" autocomplete="off" lay-verify="" lay-reqtext="请输入redis密码" value=""/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入redis密码 未设置密码忽略</div>
            </div>

            <h2>管理信息</h2>
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"><font color="red">*</font> 后台入口</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="platform" id="platform" autocomplete="off" lay-verify="required" value="admin" readonly/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入后台管理入口地址：<?php echo $currentHost;?>
                    <span id="admin_map">admin</span></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 企业的名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="company_name" id="company_name" autocomplete="off" lay-verify="required" value="xxxx 有限公司"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入企业名称</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 管理的账号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="username" autocomplete="off" lay-verify="required" value="admin"/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入后台管理员的登录账号</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><font color="red">*</font> 管理的密码</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" name="password" autocomplete="off" lay-verify="required" lay-affix="eye" value=""/>
                </div>
                <div class="layui-form-mid layui-word-aux">请输入后台管理员的登录密码</div>
            </div>


        </div>
    </div>
    <div class="footer">
        <span class="copyright"><?php echo $copyright;?></span>
        <span class="formBtn">
            <a href="javascript:void(0);" onclick="history.go(-1);return false;" class="layui-btn layui-btn-primary">返 回</a>
            <a href="javascript:void(0);" class="layui-btn" lay-filter="install" lay-submit>开始安装</a>
        </span>
    </div>
</form>
<script>
    layui.use(['form', 'layer'], function () {
        const form = layui.form, layer = layui.layer;

        /**
         * 验证数据库密码
         */
        $("#dbpwd").on('blur', function () {
            var $this = $(this);
            if (!$this.val()) return;
            $.get("/app/install/index/check", {
                db_host: $("#dbhost").val(),
                db_port: $("#dbport").val(),
                db_user: $("#dbuser").val(),
                db_pwd: $("#dbpwd").val()
            }, function (data) {
                if (data === 'false') {
                    $this.addClass('layui-form-danger');
                    layer.tips('数据库连接失败，请检查密码或其他是否正确！', $this, {
                        tips: [1, '#ff5722'],
                        maxWidth: 'auto'
                    });
                } else {
                    layer.closeAll();
                }
            });
        })


        /**
         * 访问入口变更提示
         */
        $("#platform").bind("input propertychange", function () {
            $("#admin_map").html($(this).val());
        });


        /**
         * 表单提交
         */
        form.on('submit(install)', function (data) {
            if ($(this).hasClass('layui-btn-disabled')) return false;
            const d = data.field;
            const loadIndex = layer.msg('系统安装中...', {icon: 16, shade: 0.3, time: 0});
            const url = '/app/install/index/step4?db_host=' + d.dbhost + '&db_name=' + d.dbname + '&db_pre=' + d.dbpre + '&db_user=' + d.dbuser + '&db_pwd=' + encodeURIComponent(d.dbpwd) + '&db_port=' + d.dbport + '&platform=' + d.platform + '&username=' + d.username + '&password=' + d.password + '&overwrite=' + d.overwrite + '&redis_host' + d.redis_host + '&redis_port=' + d.redis_port + '&redis_pwd=' + d.redis_pwd+'&company_name='+d.company_name;

            $.getJSON(url, function (res) {
                layer.close(loadIndex);
                if (res.code !== 0) {
                    layer.msg(res.msg, {icon: 2, shade: 0.3, time: 2000}, function () {
                    });
                    return false;
                }
                //安装成功后跳转
                layer.msg(res.msg, {icon: 1, shade: 0.3, time: 2000}, function () {
                    // window.location.href = '/admin';
                    window.location.href = "/app/install/index/step5"
                });
            });
            return false;
        });
    });
</script>
{/block}
